<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <title>Spirit8</title>
    <link rel="stylesheet" href="./assets/css/animate.min.css" />
    <link rel="stylesheet" href="./assets/css/reset.css" />
    <link rel="stylesheet" href="./assets/css/header.css" />
    <link rel="stylesheet" href="./assets/css/index.css" />
    <link rel="stylesheet" href="./assets/css/footer.css">
</head>
<body>
    <!-- 最外层 -->
    <div class="wraper">
        <div class="headbox">
            <!-- 视频背景 -->
           <div id="background">
               <img src="./assets/images/t017e2bd59a3c529006.gif" alt="">
           </div>

            <!-- 头部 -->
            <header class="header">
                <div class="container">
                    <div class="box">
                        <div class="logo wow fadeInLeft">Spirit8</div>
                        
                        <input type="checkbox" id="mobi" hidden />
                        <label for="mobi" class="mobi">
                            <span></span>
                            <span></span>
                            <span></span>
                        </label>
    
                        <nav class="nav wow fadeInRight">
                            <a href="#about">HOME</a>
                            <a href="#team">About</a>
                            <a href="#take">SERVICES</a>
                            <a href="#some">portfolio</a>
                            <a href="#work">testimonials</a>
                            <a href="#our">CONTACT</a>
                        </nav>
                    </div>
                </div>
            </header>

            <!-- banner -->
            <div class="banner">
                <div class="container">
                    <h3 class="title wow fadeInUp" data-wow-delay="100ms">wELCOME on <span>spirit8</span></h3>
                    <p class="desc wow fadeInUp" data-wow-delay="200ms">We are a digital agency with years of experience and with extraordinary people</p>
                    <div class="down wow fadeInUp" data-wow-delay="300ms">
                        <a href="#contact">↓</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 关于我们 -->
        <div class="about" id="about">
            <div class="container">
                <div class="box">
                    <div class="left">
                        <img class="wow fadeInLeft" data-wow-delay="100ms" src="./assets/images/aboutimg.jpg" />
                    </div>
                    <div class="right">
                        <div class="title">
                            <div class="short wow fadeInUp" data-wow-delay="100ms">About us</div>
                            <div class="long wow fadeInUp" data-wow-delay="150ms">
                                <span>Some</span> words <span>about us</span>
                            </div>
                        </div>

                        <p class="desc wow fadeInUp" data-wow-delay="200ms">
                            We love building and rebuilding brands through our  specific skills. Using colour, fonts, and illustration, we brand companies in a way they will never forget.
                        </p>

                        <ul class="list">
                            <li class="wow fadeInUp" data-wow-delay="210ms"><span>Mission - </span>We deliver uniqueness and quality</li>
                            <li class="wow fadeInUp" data-wow-delay="220ms"><span>Mission - </span>We deliver uniqueness and quality</li>
                            <li class="wow fadeInUp" data-wow-delay="230ms"><span>Mission - </span>We deliver uniqueness and quality</li>
                        </ul>

                        <div class="btn wow fadeInUp" data-wow-delay="250ms">
                            <a href="javascript:void(0)">Browse our work</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- team 团队合作 -->
        <div class="team" id="team">
            <div class="container">
                <div class="teambox">
                    <div class="title wow fadeInUp" data-wow-delay="100ms">Meet our team</div>
    
                    <ul class="po">
                        <input type="radio" name="photo" id="photo1" checked hidden/>
                        <li>
                            <div class="img2">
                                <div class="list">
                                    <div class="item wow fadeInUp" data-wow-delay="200ms">
                                        <div class="img">
                                            <img src="./assets/images/微信图片_20200317165921.jpg" />
                                        </div>
                                        
                                        <div class="content">
                                            <div class="name">
                                                <div class="big">Jason Statham</div>
                                                <div class="small">Knife designer</div>
                                            </div>
    
                                            <div class="desc">
                                                Do not seek to changsabjashoiaso before. Seek to create that which has not.
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="item wow fadeInUp" data-wow-delay="250ms">
                                        <div class="img">
                                            <img src="./assets/images/微信图片_20200317165921.jpg" />
                                        </div>
    
                                        <div class="content">
                                            <div class="name">
                                                <div class="big">Jason Statham</div>
                                                <div class="small">Knife designer</div>
                                            </div>
    
                                            <div class="desc">
                                                Do not seek tdsfhsdnfkdscome before. Seek to create that which has not.
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="item wow fadeInUp" data-wow-delay="300ms">
                                        <div class="img">
                                            <img src="./assets/images/微信图片_20200317165921.jpg" />
                                        </div>
    
                                        <div class="content">
                                            <div class="name">
                                                <div class="big">Jason Statham</div>
                                                <div class="small">Knife designer</div>
                                            </div>
    
                                            <div class="desc">
                                                Do not seek sdkfhaksdjk come before. Seek to create that which has not.
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="item wow fadeInUp" data-wow-delay="350ms">
                                        <div class="img">
                                            <img src="./assets/images/微信图片_20200317165921.jpg" />
                                        </div>
    
                                        <div class="content">
                                            <div class="name">
                                                <div class="big">Jason Statham</div>
                                                <div class="small">Knife designer</div>
                                            </div>
    
                                            <div class="desc">
                                                Do not seek sdkfhaksdjk come before. Seek to create that which has not.
                                        </div>
                                    </div>
                                </div>
    
                            </div>
                        </li>
    
                        <input type="radio" name="photo" id="photo2" hidden/>
                        <li>
                            <div class="img2">
                                <div class="list">
                                    <div class="item wow fadeInUp" data-wow-delay="200ms">
                                        <div class="img">
                                            <img src="./assets/images/微信图片_20200317175220.jpg" />
                                        </div>
                                        
                                        <div class="content">
                                            <div class="name">
                                                <div class="big">Knife designer</div>
                                                <div class="small">Jason Statham</div>
                                            </div>
    
                                            <div class="desc">
                                                K Do hsdjsdfklkaae what has come before. Seek to create that which has not.
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="item wow fadeInUp" data-wow-delay="250ms">
                                        <div class="img">
                                            <img src="./assets/images/微信图片_20200317175220.jpg" />
                                        </div>
    
                                        <div class="content">
                                            <div class="name">
                                                <div class="big">Knife designer</div>
                                                <div class="small">Jason Statham</div>
                                            </div>
    
                                            <div class="desc">
                                                K Do not ssiayufajoalwhat has come before. Seek to create that which has not.
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="item wow fadeInUp" data-wow-delay="300ms">
                                        <div class="img">
                                            <img src="./assets/images/微信图片_20200317175220.jpg" />
                                        </div>
    
                                        <div class="content">
                                            <div class="name">
                                                <div class="big">Knife designer</div>
                                                <div class="small">Jason Statham</div>
                                            </div>
    
                                            <div class="desc">
                                                K Do not seek to change what has come before. Seek to create that which has not.
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="item wow fadeInUp" data-wow-delay="350ms">
                                        <div class="img">
                                            <img src="./assets/images/微信图片_20200317175220.jpg" />
                                        </div>
    
                                        <div class="content">
                                            <div class="name">
                                                <div class="big">Knife designer</div>
                                                <div class="small">Jason Statham</div>
                                            </div>
    
                                            <div class="desc">
                                                K Do not seek to change what has come before. Seek to create that which has not.
                                            </div>
                                        </div>
                                    </div>
                                </div>
    
                            </div>
                        </li>
    
                        <input type="radio" name="photo" id="photo3" hidden/>
                        <li>
                            <div class="img2">
                                <div class="list">
                                    <div class="item wow fadeInUp" data-wow-delay="200ms">
                                        <div class="img">
                                            <img src="./assets/images/微信图片_20200317175244.jpg" />
                                        </div>
                                        
                                        <div class="content">
                                            <div class="name">
                                                <div class="big">Jason Statham</div>
                                                <div class="small">Knife designer</div>
                                            </div>
    
                                            <div class="desc">
                                             not seek to change what has come before. Seek to create that which has not.
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="item wow fadeInUp" data-wow-delay="250ms">
                                        <div class="img">
                                            <img src="./assets/images/微信图片_20200317175244.jpg" />
                                        </div>
    
                                        <div class="content">
                                            <div class="name">
                                                <div class="big">Jason Statham</div>
                                                <div class="small">Knife designer</div>
                                            </div>
    
                                            <div class="desc">
                                             not seek to change what has come before. Seek to create that which has not.
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="item wow fadeInUp" data-wow-delay="300ms">
                                        <div class="img">
                                            <img src="./assets/images/微信图片_20200317175244.jpg" />
                                        </div>
    
                                        <div class="content">
                                            <div class="name">
                                                <div class="big">Jason Statham</div>
                                                <div class="small">Knife designer</div>
                                            </div>
    
                                            <div class="desc">
                                             not seek to change what has come before. Seek to create that which has not.
                                            </div>
                                        </div>
                                    </div>
    
                                    <div class="item wow fadeInUp" data-wow-delay="350ms">
                                        <div class="img">
                                            <img src="./assets/images/微信图片_20200317175244.jpg" />
                                        </div>
    
                                        <div class="content">
                                            <div class="name">
                                                <div class="big">Jason Statham</div>
                                                <div class="small">Knife designer</div>
                                            </div>
    
                                            <div class="desc">
                                             not seek to change what has come before. Seek to create that which has not.
                                            </div>
                                        </div>
                                    </div>
                                </div>
    
                            </div>
                        </li>
    
    
    
                    </ul>
                    <div class="more wow fadeInUp" data-wow-delay="400ms">
                        <span><label for="photo1"></label></span>
                        <span><label for="photo2"></label></span>
                        <span><label for="photo3"></label></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- take 团队下 -->
        <div class="take" id="take">
            <div class="container">
                <div class="takebox">
                    <div class="title wow fadeInUp" data-wow-delay="100ms">take a look at our services</div>
                    <div class="txet wow fadeInUp" data-wow-delay="150ms">
                        <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
                    </div>
                    <div class="list">
                        <div class="item wow fadeInUp" data-wow-delay="200ms">
                            <div class="img">
                                <img src="./assets/images/chen.png" />
                            </div>
                            
                            <div class="content">
                                <div class="name">
                                    <div class="big">Web design</div>
                                </div>

                                <div class="desc">
                                    The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                                </div>
                            </div>
                        </div>

                        <div class="item wow fadeInUp" data-wow-delay="250ms">
                            <div class="img">
                                <img src="./assets/images/chen2.png" />
                            </div>

                            <div class="content">
                                <div class="name">
                                    <div class="big">Mobile apps</div>
                                </div>

                                <div class="desc">
                                    The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                                </div>
                            </div>
                        </div>

                        <div class="item wow fadeInUp" data-wow-delay="300ms">
                            <div class="img">
                                <img src="./assets/images/chen3.png" />
                            </div>

                            <div class="content">
                                <div class="name">
                                    <div class="big">PHOTOGRAPHY</div>
                                </div>

                                <div class="desc">
                                    The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                                </div>
                            </div>
                        </div>

                        <div class="item wow fadeInUp" data-wow-delay="350ms">
                            <div class="img">
                                <img src="./assets/images/Chen4.png" />
                            </div>

                            <div class="content">
                                <div class="name">
                                    <div class="big">marketing</div>
                                </div>

                                <div class="desc">
                                    The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="some" id="some">
            <div class="container">
                <div class="somebox">
                    <div class="wan wow fadeInUp" data-wow-delay="100ms">SOME OF OUR CLIENTS</div>
                    <div class="imgs wow fadeInLeft" data-wow-delay="150ms">
                       <img src="./assets/images/a1.png">
                    </div>
                    
                    <div class="more wow fadeInUp" data-wow-delay="200ms">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>

            </div>
        </div>

        <!-- work -->
        <div class="work" id="work">
            <div class="container">
                <div class="workbox">
                    <div class="title wow fadeInUp" data-wow-delay="100ms">take a look at our work</div>

                    <div class="desc wow fadeInUp" data-wow-delay="200ms">
                        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </div>

                    <div class="worklist">
                        <div class="nav">
                            <div class="left wow fadeInUp" data-wow-delay="300ms">Filter by type</div>
                            <div class="right wow fadeInUp" data-wow-delay="300ms">
                                <nav class="typelist">
                                    <a href="javascript:void(0)">all</a>
                                    <a href="javascript:void(0)">web design</a>
                                    <a href="javascript:void(0)">mobile design</a>
                                    <a href="javascript:void(0)">hotograpy</a>
                                </nav>
                            </div>
                        </div>

                        <div class="list">
                            <div class="item wow fadeInUp" data-wow-delay="350ms">
                                <img src="./assets/images/workimg.png" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="360ms">
                                <img src="./assets/images/workimg.png" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="370ms">
                                <img src="./assets/images/workimg.png" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="380ms">
                                <img src="./assets/images/workimg.png" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="390ms">
                                <img src="./assets/images/workimg2.png" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="400ms">
                                <img src="./assets/images/workimg2.png" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="410ms">
                                <img src="./assets/images/workimg2.png" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="420ms">
                                <img src="./assets/images/workimg2.png" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="430ms">
                                <img src="./assets/images/workimg3.png" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="440ms">
                                <img src="./assets/images/workimg3.png" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="450ms">
                                <img src="./assets/images/workimg3.png" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                            <div class="item wow fadeInUp" data-wow-delay="460ms">
                                <img src="./assets/images/workimg3.png" />
                                <div class="box">
                                    <div class="big">Trend and fashion</div>
                                    <div class="small">Website design</div>
                                    <a class="more">+</a>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>


        <!-- 客户端 -->
        <div class="our" id="our">
            <div class="container">
                <div class="ourbox">
                    <div class="title wow fadeInUp" data-wow-delay="100ms">our clients’ testimonials</div>
                    <div class="text wow fadeInUp" data-wow-delay="150ms">
                        This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </div>
                    <p>Dean Martin, CEO Acme Inc.</p>
                    <div class="more wow fadeInUp" data-wow-delay="200ms">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>

            </div>
        </div>


        <!-- contact 联系我们 -->
        <div class="contact" id="contact">
            <div class="container">
                <div class="contactbox">
                    <div class="title wow fadeInUp" data-wow-delay="100ms">feel free to contact us</div>

                    <div class="desc wow fadeInUp" data-wow-delay="150ms">
                        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
                    </div>

                    <div class="contact-form">
                        <div class="info">
                            <div class="left wow fadeInUp" data-wow-delay="200ms">
                                <div class="formtitle">Name<sup>*</sup></div>
                                <div class="input"><input type="text" name="username" /></div>
                            </div>

                            <div class="right wow fadeInUp" data-wow-delay="200ms">
                                <div class="formtitle">Emall Address<sup>*</sup></div>
                                <div class="input"><input type="text" name="email" /></div>
                            </div>
                        </div>

                        <div class="message wow fadeInUp" data-wow-delay="250ms">
                            <div class="formtitle">
                                Message<sup>*</sup>
                            </div>
                            <div class="textarea">
                                <textarea></textarea>
                            </div>
                        </div>

                        <div class="submit wow fadeInUp">
                            <button class="btn">SEND</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="footer">
            <div class="footerbox">
                <div class="text">ALL RIGHTS RESERVED. COPYRIGHT © 2014 <span>SPIRIT8</span></div>
                <div class="img">
                    <img src="./assets/images/n1.png">
                    <img src="./assets/images/n2.png">
                    <img src="./assets/images/n3.png">
                    <img src="./assets/images/n4.png">
                    <img src="./assets/images/n5.png">
                </div>
            </div>
        </div>

    </div>
</body>
</html>
<script src="./assets/js/wow.min.repeat.js"></script>
<script src="./assets/js/jquery.js"></script>
<script>
    var background = document.getElementById("background");

    //将视频速度调整
    // background.playbackRate = 0.5;

    //实例化懒加载插件
    new WOW().init();

    $(function(){  
        // a href == id 
        //锚点跳转滑动效果  
        $('a[href*=#],area[href*=#]').click(function() {  
            console.log(this.pathname)  
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {  
                var $target = $(this.hash);  
                $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');  
                if ($target.length) {  
                    var targetOffset = $target.offset().top;  
                    $('html,body').animate({  
                                scrollTop: targetOffset  
                            },  
                            1000);  
                    return false;  
                }  
            }  
        });  
    })
</script>